<html>
<head>
	<title>nCaptcha 2 Demo</title>
	<style type="text/css">
	html {
		color: white;	
		background-color: black;
	}
	.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
	}

	.tooltip .tooltiptext {
    visibility: hidden;
    width: 240px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
	}
	.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
	}

	.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
	} 
	</style>
	<script type="text/javascript" >
function send_request(url, data, onFail, onSuccess) {
	if (typeof fetch != "undefined") {
		fetch(url).then(function(response) {
    		return response.text();
   	}).then(function(json) {
   		onSuccess(json);
   	}).catch(function(ex) {
   		console.error(ex);
    		onFail();
  		});	
	}else {
		console.warn("send_request() -> Outdated browser found, attempting fallback method...");
		var http = new XMLHttpRequest();
		http.open('POST', url, true);
	   http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	   
	   var hasResponse = false;
	   //var res = "";
	   http.onreadystatechange = function() {
		if (http.readyState == 4 && http.status == 200) {
		//		res = http.responseText;
				onSuccess(http.responseText.split("\n")[4]);
			}
		}
		http.ontimeout = function() {
			alert("nTube: onTimeout() was called when fetching your video!");
		}
		http.send(params);
	}
	//var http = new XMLHttpRequest();
	//var params = data;
	//http.timeout = 0;
	//http.responseType = 'blob';
	//http.open('POST', url, true);
	//http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
			
	//var hasResponse = false;
	//var res = "";
	//http.onreadystatechange = function() {
	//	if (http.readyState == 4 && http.status == 200) {
	//		res = http.responseText;
	//		onSuccess(http.responseText);
	//	}
	//}
	//http.ontimeout = function() {
	//	alert("nTube: onTimeout() was called when fetching your video!");
	//}
	//http.send(params);
	
	/*		
	var stop = false;
	var time = 0;
	while (!hasResponse) {
		if (stop) {
			break;
		}
		if (time > 1500) {
			//alert("Timeout occured, try again.");
			onFail();
			stop = true;
		}
		var ix = -1;
		time += 1;
	}*/
}

	function onSuccess(uid) {
		document.getElementById("_auth").innerHTML = "Authentication UID: " + uid;
		send_request("/check_uid?input=" + uid, "", function () {
			document.getElementById("_auth_uid").innerHTML = "Valid UID: false";
		}, function (data) {
			try{
				var rsplit = data.split("\n");
				console.debug(rsplit);
				var result = rsplit[0];
				if (rsplit.length > 1) {
					console.debug("Lease Time: " + rsplit[1]);				
				}
				if (result == "VALID") {
					document.getElementById("_auth_uid").innerHTML = "Valid UID: true";
				}else{
					document.getElementById("_auth_uid").innerHTML = "Valid UID: false";
				}			
			}catch (e) {
				document.getElementById("_auth_uid").innerHTML = e;
			}
		});
	}	
	
	function reloadCaptcha() {
		createCaptcha();
	}
	
	window.onload = function () {
		createCaptcha();
	}	
	
	function createCaptcha() {
		document.getElementById("__ns_check").style.display = "none";
		document.getElementById("__ns_check").style.visibility = "hidden";
		document.getElementById("__captcha_input").value = "";
		document.getElementById("__captcha").style.display = "hidden";
		document.getElementById("__captcha_input").style.display = "inline-block";
		document.getElementById("__captcha_submit").style.display = "";
		document.getElementById("__captcha_reload").style.display = "";
		send_request("/generate_captcha", "", function () {
			alert("nCaptcha failed to load basic data.");
		}, function (data) {
			var x = data.split("\n");
			var dta = x[0];
			var t = x[1];	
			var uid = x[2];
			document.getElementById("__captcha").style.display = "";
 			if (t == "type:screenwords" || t == "type:mutliword") {
				document.getElementById("_instructions").innerHTML = "Enter the letters above.";	
 			}else if (t == "type:bot_detected") {
 				document.getElementById("_ncaptcha_border").style.borderColor = "red";
			   document.getElementById("_instructions").innerHTML = "Try again later.";
			   document.getElementById("__captcha_submit").style.display = "none";
				document.getElementById("__captcha_input").style.display = "none";
				document.getElementById("__captcha_reload").style.display = "none";
				document.getElementById("_ncaptcha_border").style.borderColor = "red";
				document.getElementById("__captcha").style.display = "none";	
				window.setTimeout(function () {
					window.onload();
				}, 1000 * 120);	
				return;		
 			}else if (t == "type:captcha_done") {
 				document.getElementById("_ncaptcha_border").style.borderColor = "green";
 				onSuccess(uid);	
 				document.getElementById("_ncaptcha_border").style.borderColor = "green";
			 	document.getElementById("_instructions").innerHTML = "Captcha already done.";
			   document.getElementById("__captcha_submit").style.display = "none";
			   document.getElementById("__captcha_reload").style.display = "none";
				document.getElementById("__captcha_input").style.display = "none";
				document.getElementById("__captcha").style.display = "none";	
				return;	
 			}else if (t == "type:shapes") {
 				document.getElementById("_instructions").innerHTML = "Enter the shape above in LOWER case.";	
 			}else if (t == "type:messedup") {
 				document.getElementById("_instructions").innerHTML = "Enter the word within the halfed then reversed word above.";
 			}else if (t == "type:math") {
 				document.getElementById("_instructions").innerHTML = "Enter the answer to the math question.";	
 			}else if (t == "type:objectid") {
 				document.getElementById("_instructions").innerHTML = "Enter the item in the above image.";	
 			}else if (t == "type:truefalse") {
 				document.getElementById("_instructions").innerHTML = "Enter the value of the statement. [true/false]";	
 			}
			document.getElementById("__captcha").src = dta;
		})
	}
	
	function verify() {
		document.getElementById("_instructions").innerHTML = "Verifying...";	
		var inp = document.getElementById("__captcha_input").value;
		send_request("/check_captcha?input=" + inp, "", function () {
			document.getElementById("_instructions").innerHTML = "Internal error occured, try again. [connect]";
			setTimeout(function () {
						window.onload();		
			}, 2000);
		}, function (data) {
		/**
		*	Note: this part should be done from the server.
		*/
			var x = data.split("\n");
			try{
				var response = x[0];		
				var uid = x[1];
				if (response == null || response == "") {
					document.getElementById("_instructions").innerHTML = "Internal error occured, try again. [response]";
					setTimeout(function () {
						window.onload();		
					}, 2000);	
					return;	
				}	
				if (response == "failed::0"){
					document.getElementById("_instructions").innerHTML = "Captcha failed, try again.";
					setTimeout(function () {
						window.onload();		
					}, 2000);	
					return;	
				}else if (response == "passed::1") {
					document.getElementById("_ncaptcha_border").style.borderColor = "green";
					document.getElementById("_instructions").innerHTML = "Captcha passed.";
					document.getElementById("__captcha_submit").style.display = "none";
					document.getElementById("__captcha_input").style.display = "none";
					document.getElementById("__captcha_reload").style.display = "none";
					document.getElementById("__captcha").style.display = "none";
					document.getElementById("_ncaptcha_border").style.borderColor = "green";
					onSuccess(uid);
					return;
				}else{
					document.getElementById("_instructions").innerHTML = "Unexpected result, try again.";
					setTimeout(function () {
							window.onload();		
					}, 2000);
				}
			}catch (ex) {
				console.error(ex);
				document.getElementById("_instructions").innerHTML = "Internal error occured, try again. [ex]";
				setTimeout(function () {
						window.onload();		
				}, 2000);
			}
		});
	}
	</script>
</head>
<body>
	<div id="_ncaptcha_border" style="border: 1px solid blue;width: 280px;line-height: 85%;">
		<div style="background-color: red;width:100%;" id="__ns_check">
				<center>
					<a href="_captcha_nojsguide.html" style="text-decoration: none; color: white;">Click me for No Javascript Guide</a>		
				</center>		
			</div>
		<img id="__captcha" src="generate_captcha_fallback&source=imgID" alt="Loading captcha... JS is required.">	
		<p id="_instructions" style="font-family: sans-serif;text-align: center;">NoScript users, check the guide.<br>Waiting for captcha via JS...</p>		
		<input style="display: inline-block;width:65%;color: inherit;background-color: inherit;" id="__captcha_input" /><input id="__captcha_submit" onclick="verify();" type="submit" value="Submit">
		<br>	
		<img src="_captcha_logo.png" style="color: white;font-size: x-small;" alt="nCaptcha 2.0">
		<input style="border:1px solid gray;color: inherit;background-color: inherit;display: none;" id="__captcha_reload" onclick="reloadCaptcha();" type="submit" value="Reload">
	</div>
	<p id="_auth">Authentication UID: [Waiting...]</p>
	<p id="_auth_uid">Valid UID: false</p>
</body>
</html>